<template>
  <AppHeader
    title="读写综合"
    :banAnimate="true"
    backgroundColor="rgba(0,0,0,0)"
    titleColor="#ffffff"
  >
    <template #left>
      <img
        @click="onClickLeft"
        src="@/assets/images/icon-arrow-left-white.png"
        width="9"
        height="18"
      />
    </template>
  </AppHeader>
  <div class="container">
    <div class="top-bg">
      <div class="score">2.22</div>
      <div class="comments">得分率40%</div>
    </div>
    <div class="score-details">
      <div class="box">
        <van-cell title="总分" value="30" />
        <van-cell title="作答用时" value="3min 16s" />
      </div>
      <div class="result-list" >
        <div class="item" v-for="(item,i) in resultlist" :key="i">
          <img v-if="i===0"
        src="@/assets/images/written/right.png"
        width="23"
        height="16"
      />
      <img v-if="i===1"
        src="@/assets/images/written/error.png"
        width="18"
        height="18"
      />
      <img v-if="i===2"
        src="@/assets/images/written/halfRight.png"
        width="26"
        height="16"
      />
      <img v-if="i===3"
        src="@/assets/images/written/unknown.png"
        width="12"
        height="18"
      />
      <div class="t0" >
{{item.name}}
        </div>
        <div class="t1" >
{{item.num}}
        </div>
      </div>
      </div>
      <van-collapse v-model="activeNames">
        <van-collapse-item name="1" >
          <template #title>
            <div class="titleleft">选择题（<span><i>3分</i>/8分） </span></div>
            </template>
            <div class="list-item" v-for="(item,i) in datalist" :key="i">
            <div class="title">{{item.title}}</div>
            <div class="score">（<span class="text-blue">1分</span>/1分）</div>
            <div v-for="(option,idx) in item.option" :key="idx" class="option">
                <span class="unchecked " :class="item.rightopt&&item.rightopt===option?'checked-blue':''">{{idx===0?'A':idx===1?'B':'C'}}</span>
                <!-- <span class="checked ">{{idx===0?'A':idx===1?'B':'C'}}</span> -->
                <span class="option-item">{{option}}</span>
            </div>
            <div class="answer">参考答案  <span class="text-blue">A</span></div>
            <div class="explain">试题解析  <span class="text-blue">选A的原因是舍来来来快来了</span></div>
        </div>
        </van-collapse-item>
      </van-collapse>
    </div>
  </div>
</template>

<script setup>
import AppHeader from "@/components/AppHeader.vue";
import { useRouter } from "vue-router";
import { ref, onMounted, watch } from "vue";
const router = useRouter();

const onClickLeft = () => {
  router.back();
};
const activeNames = ref(['1']);
const resultlist = [{
  id: 1, name: "已做对", num: '3'
},
{
  id:2,name:"已做错",num:'3'
  },
  {
  id:3,name:"已半对",num:'3'
  },
  {
  id:4,name:"已半对",num:'3'
}
];
const datalist = [
  {
    id: 1,
    title: '1. How many people live New York?',
    option: ['in', 'on', 'of'],
    rightopt:'in'
  },
  {
    id: 2,
    title: '1. How many people live New York?',
    option: ['in','on','of']
  },
  {
    id: 3,
    title: '1. How many people live New York?',
    option: ['in','on','of']
  },
  {
    id: 4,
    title: '1. How many people live New York?',
    option: ['in','on','of']
  },
  {
    id: 5,
    title: '1. How many people live New York?',
    option: ['in','on','of']
  },
  {
    id: 6,
    title: '1. How many people live New York?',
    option: ['in','on','of']
  },
  {
    id: 7,
    title: '1. How many people live New York?',
    option: ['in','on','of']
  },
  {
    id: 1,
    title: '1. How many people live New York?',
    option: ['in','on','of']
  },
  {
    id: 8,
    title: '1. How many people live New York?',
    option: ['in','on','of']
  }
]
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  background-color: #ffffff;
  position: relative;
  overflow-y: auto;
  background: url(/src/assets/images/listening/work-bg.png) top no-repeat;
    background-size: 100% 300px;
  .top-bg {
    height: 330px;
    padding-top: 90px;
    text-align: center;
    color: #fff;
    .score {
      font-size: 66px;
      margin-bottom: 20px;
    }
    .comments {
      font-size: 18px;
      margin-bottom: 30px;
      letter-spacing: 2px;
    }
    .success-txt {
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        margin-right: 10px;
      }
      img {
        width: 18px;
        height: 18px;
      }
    }
  }

  .score-details {
    width:100%;
    background-color: #ffffff;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 280px;
    .result-list {
      margin-bottom: 10px;
      font-size: 14px;
      padding: 10px 0;
      display: flex;
      border:1px solid #E5E5E5;
      .item{
        flex: 1;
        text-align: center;
        .t0{
          font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 14px;
color: #333333;
line-height: 20px;
font-style: normal;
margin: 10px 0;
        }
        .t1{
          font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 14px;
color: #333333;
line-height: 20px;
font-style: normal;
margin-bottom: 15px;
        }
      }
    }
    .titleleft
      {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #333333;
        line-height: 22px;
        text-align: left;
        font-style: normal;
          span{
            color: #8E8E8E;
            i{
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              font-size: 12px;
              color: #FA192C;
              line-height: 22px;
              text-align: left;
              font-style: normal;
            }
          }
      }
    .list-item{
       padding: 0 15px;
       .text-blue{
        color: #0CB76C;
       }
        .title{
          font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 18px;
            color: #333333;
            line-height: 25px;
            text-align: left;
            font-style: normal;
        }
       .option{
      margin: 15px 0;
      .unchecked{
        display:inline-block;
        width: 30px;
        height: 30px;
        border: 1px solid #8E8E8E;
        border-radius: 50%;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: #8E8E8E;
        text-align: left;
        font-style: normal;
        text-align: center;
        line-height: 28px;
        &.checked-blue{
          background: #0CB76C;
        color: #ffffff;
        }
        &.checked-red{
          background: #FA192C;
        color: #ffffff;
        }
      }
      .option-item{
            font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 18px;
          color: #8E8E8E;
          line-height: 25px;
          text-align: left;
          font-style: normal;
          margin-left: 15px;
          }
        }
        .answer{
          font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 12px;
color: #8E8E8E;
line-height: 16px;
text-align: left;
font-style: normal;
border-bottom: 1px solid #e5e5e5;
padding-bottom: 15px;
        }
        .explain{
          font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 12px;
color: #8E8E8E;
line-height: 16px;
text-align: left;
font-style: normal;
padding-top: 15px;
padding-bottom: 15px;
        }
      }
   }
}
</style>
